<!-- 设备管理-设备列表页面 -->
<template>
  <div v-loading="exportLoading" element-loading-text="打印准备中..." class="app-container" style="padding: 0; margin: 0">
    <div v-show="!equipopen" style="width: 100%; height: 100%; padding: 20px; background: white">
      <px-tabs
        v-model="activeWater"
        class="equipment-tabs"
        style="float: left; width: 100%; margin-top: -10px; margin-left: 10px; background: none"
        @tab-change="setTabs"
      >
        <px-tab-pane v-for="(item, index) in tabPaneList2" :key="index" :disabled="loading" :name="item.name">
          <template #label>
            <p class="pane-bottom">{{ item.label }}</p>
            <p class="pane-line" />
          </template>
        </px-tab-pane>
      </px-tabs>
      <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
        <px-form-item label="科室">
          <px-select
            v-model="queryParams.classCode"
            placeholder="请选择科室"
            clearable
            style="width: 210px"
            filterable
            @change="setreceiveCompanyCode"
          >
            <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item style="width: 310px !important" label="系统">
          <px-tree-select
            v-model="queryParams.systemCode"
            clearable
            style="width: 100%"
            placeholder="请选择设备系统（树状图）"
            :props="defaultProps"
            filterable
            :data="systemList"
            check-strictly="true"
            multiple
            :render-after-expand="false"
            collapse-tags
            collapse-tags-tooltip
          />
        </px-form-item>
        <px-form-item style="width: 310px !important" label="指标名称">
          <px-input v-model="queryParams.indicatorName" placeholder="请输入指标名称" style="width: 240px" clearable />
        </px-form-item>
        <px-form-item style="width: 310px !important" label="绑定点位">
          <!-- <px-input v-model="queryParams.point" placeholder="请输入指标名称" style="width: 240px" clearable /> -->
          <px-select
            v-model="queryParams.point"
            style="width: 240px"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入指标名称"
            remote-show-suffix
            :remote-method="remoteMethod"
            :loading="zbloading"
          >
            <px-option v-for="item in options" :key="item.measureCode" :label="item.measureName" :value="item.measureCode" />
          </px-select>
        </px-form-item>
        <px-form-item style="width: 310px !important" label="指标级别">
          <px-select v-model="queryParams.indicatorLevel" placeholder="请选择接指标级别" clearable style="width: 240px" filterable>
            <px-option v-for="dict in receiveCompanyList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item label="时间日期" style="width: 440px !important">
          <px-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="shortcuts"
            :default-time="defaultTime"
            @change="setspctime"
          />
        </px-form-item>
        <!-- <px-form-item label="时间维度" style="width: 430px !important; border: none !important">
          <px-radio-group v-model="timePeriod" @change="handleQuery('search')">
            <px-radio-button label="minutes">分钟</px-radio-button>
            <px-radio-button label="hour">小时</px-radio-button>
            <px-radio-button label="day">天</px-radio-button>
            <px-radio-button label="week">周</px-radio-button>
            <px-radio-button label="months">月</px-radio-button>
          </px-radio-group>
        </px-form-item> -->

        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery('search')">搜索</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
        <px-button
          v-if="activeWater == 'first' && classcode == 'WATER'"
          v-has="'SPC_SEARCH_LIST_EXPORT_WATER'"
          style="margin-top: -17px"
          type="primary"
          plain
          @click="exportResult()"
          >导出</px-button
        >
        <px-button
          v-if="activeWater == 'two' && classcode == 'WATER'"
          v-has="'SPC_SEARCH_IMGLIST_EXPORT_WATER'"
          style="margin-top: -17px"
          :disabled="checkvaleList.length < 1"
          type="primary"
          plain
          @click="printFile2()"
          >导出</px-button
        >

        <px-button
          v-if="activeWater == 'first' && classcode == 'MACHINE'"
          v-has="'SPC_SEARCH_LIST_EXPORT_MACHINE'"
          style="margin-top: -17px"
          type="primary"
          plain
          @click="exportResult()"
          >导出</px-button
        >
        <px-button
          v-if="activeWater == 'two' && classcode == 'MACHINE'"
          v-has="'SPC_SEARCH_IMGLIST_EXPORT_MACHINE'"
          style="margin-top: -17px"
          :disabled="checkvaleList.length < 1"
          type="primary"
          plain
          @click="printFile2()"
          >导出</px-button
        >

        <px-button
          v-if="activeWater == 'first' && classcode == 'GAS'"
          v-has="'SPC_SEARCH_LIST_EXPORT_GAS'"
          style="margin-top: -17px"
          type="primary"
          plain
          @click="exportResult()"
          >导出</px-button
        >
        <px-button
          v-if="activeWater == 'two' && classcode == 'GAS'"
          v-has="'SPC_SEARCH_IMGLIST_EXPORT_GAS'"
          style="margin-top: -17px"
          :disabled="checkvaleList.length < 1"
          type="primary"
          plain
          @click="printFile2()"
          >导出</px-button
        >

        <px-button
          v-if="activeWater == 'first' && classcode == 'ELECTRICTITY'"
          v-has="'SPC_SEARCH_LIST_EXPORT_ELECTRICTITY'"
          style="margin-top: -17px"
          type="primary"
          plain
          @click="exportResult()"
          >导出</px-button
        >
        <px-button
          v-if="activeWater == 'two' && classcode == 'ELECTRICTITY'"
          v-has="'SPC_SEARCH_IMGLIST_EXPORT_ELECTRICTITY'"
          style="margin-top: -17px"
          :disabled="checkvaleList.length < 1"
          type="primary"
          plain
          @click="printFile2()"
          >导出</px-button
        >
      </px-form>
      <div id="print-content2" ref="tableElement2" class="printTable" style="width: 100%">
        <div class="spcchart" style="margin: 0">
          <tableChart2 :activeCharts="activeCharts" :chartnum="chartnum" :SpcAnalysis="SpcAnalysis3" />
        </div>
      </div>
      <px-scrollbar v-show="!equipopen && activeWater == 'two'" v-loading="loading" style="width: 100%; height: calc(100vh - 364px)">
        <div v-if="SpcAnalysis2.length > 0" class="spcchart" style="margin: 0">
          <px-radio-group v-model="chartnum" class="ml-4" @change="radiochang">
            <px-radio :label="12" size="large">两个图</px-radio>
            <px-radio :label="8" size="large">三个图</px-radio>
            <px-radio :label="6" size="large">四个图</px-radio>
          </px-radio-group>
          <tableChart
            v-if="typeList"
            :activeCharts="activeCharts"
            :tableJobidList="tableJobidList"
            :chartnum="chartnum"
            :SpcAnalysis="SpcAnalysis2"
            @tocheckedCities="getcheckvalue"
            @getspcdetail="handleSpcAnalysis"
          />
          <px-empty v-else description="暂无数据" />
        </div>
        <px-empty v-else description="暂无数据" />
      </px-scrollbar>
      <px-table
        v-if="!equipopen && activeWater == 'first'"
        v-loading="loading"
        :data="typeList"
        class="listtable"
        height="calc(100vh - 369px)"
        show-overflow-tooltip
        border
        @selection-change="handleSelectionChange"
      >
        <!-- <px-table-column type="selection" width="40" /> -->
        <!-- <px-table-column width="200" label="JOB ID" prop="jobId" /> -->
        <px-table-column label="序号" width="60" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column label="指标名称" width="230" prop="indicatorName">
          <template #default="scope">
            <span>{{ scope.row.indicatorName }}</span>
          </template>
        </px-table-column>

        <px-table-column label="指标级别" align="center" prop="indicatorLevel">
          <template #default="scope">
            <div v-if="scope.row.indicatorLevel == 'Key-key'" class="level1">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'Key' || scope.row.indicatorLevel == 'key'" class="level2">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'non-key'" class="level3">{{ scope.row.indicatorLevel }}</div>
          </template>
        </px-table-column>
        <px-table-column label="子系统" width="230" prop="className">
          <template #default="scope">
            <span>{{ scope.row.systemName ? scope.row.systemName : scope.row.systemCode }}</span>
          </template>
        </px-table-column>
        <!--<px-table-column label="绑定点位" width="210" prop="point">
          <template #default="scope">
            <span>{{ scope.row.point }}</span>
          </template>
        </px-table-column>
         <px-table-column label="USL" prop="uslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              USL <px-icon><Back /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uslValue ? scope.row.uslValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UCL" prop="uclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UCL <px-icon><Back /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uclValue ? scope.row.uclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UWL" prop="uwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UWL <px-icon><Back /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uwlValue ? scope.row.uwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="T" prop="targetValue">
          <template #default="scope">
            <span>{{ scope.row.targetValue ? scope.row.targetValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LWL" prop="lwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LWL <px-icon><Right /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lwlValue ? scope.row.lwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LCL" prop="lclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LCL <px-icon><Right /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lclValue ? scope.row.lclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LSL" prop="lslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LSL <px-icon><Right /></px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lslValue ? scope.row.lslValue : "-" }}</span>
          </template>
        </px-table-column> -->
        <px-table-column label="最大值">
          <template #default="scope">
            <span>{{ scope.row.maxValue != null ? scope.row.maxValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="平均值">
          <template #default="scope">
            <span>{{ scope.row.avgValue != null ? scope.row.avgValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="最小值">
          <template #default="scope">
            <span>{{ scope.row.minValue != null ? scope.row.minValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="cp值" prop="oowCount">
          <template #default="scope">
            <span>{{ scope.row.cpValue != null ? scope.row.cpValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="cpk值" prop="oocCount">
          <template #default="scope">
            <span>{{ scope.row.cpkValue != null ? scope.row.cpkValue : "-" }}</span>
          </template>
        </px-table-column>

        <px-table-column label="OOW" prop="oowCount">
          <template #default="scope">
            <span>{{ scope.row.oowCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOC" prop="oocCount">
          <template #default="scope">
            <span>{{ scope.row.oocCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOS" prop="oosCount">
          <template #default="scope">
            <span>{{ scope.row.oosCount }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" align="center" width="140">
          <template #default="scope">
            <px-button
              v-if="classcode == 'WATER'"
              v-has="'SPC_SEARCH_ANALYSIS_WATER'"
              link
              type="primary"
              @click="handleSpcAnalysis(scope.row.jobId)"
            >
              <px-tooltip content="分析" placement="top">
                <p>
                  <spcicon />
                </p> </px-tooltip
            ></px-button>
            <px-button
              v-if="classcode == 'MACHINE'"
              v-has="'SPC_SEARCH_ANALYSIS_MACHINE'"
              link
              type="primary"
              @click="handleSpcAnalysis(scope.row.jobId)"
            >
              <px-tooltip content="分析" placement="top">
                <p>
                  <spcicon />
                </p> </px-tooltip
            ></px-button>
            <px-button v-if="classcode == 'GAS'" v-has="'SPC_SEARCH_ANALYSIS_GAS'" link type="primary" @click="handleSpcAnalysis(scope.row.jobId)">
              <px-tooltip content="分析" placement="top">
                <p>
                  <spcicon />
                </p> </px-tooltip
            ></px-button>
            <px-button
              v-if="classcode == 'ELECTRICTITY'"
              v-has="'SPC_SEARCH_ANALYSIS_ELECTRICTITY'"
              link
              type="primary"
              @click="handleSpcAnalysis(scope.row.jobId)"
            >
              <px-tooltip content="分析" placement="top">
                <p>
                  <spcicon />
                </p> </px-tooltip
            ></px-button>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>

      <pagination
        v-if="!equipopen"
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        style="margin-bottom: -10px"
        :total="total"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改参数配置对话框 -->

    <px-scrollbar v-if="equipopen" class="editorEquip">
      <div class="detailtop">
        <px-from class="custom-form-ui" style="position: relative">
          <px-button style="margin-left: 24px" type="primary" :icon="ArrowLeft" @click="cancel">返回</px-button>
          <!-- <px-radio-group v-model="timePeriod" style="position: absolute; top: -6px; margin-left: 24px" @change="setTimePeriod()">
            <px-radio-button label="minutes">分钟</px-radio-button>
            <px-radio-button label="hour">小时</px-radio-button>
            <px-radio-button label="day">天</px-radio-button>
            <px-radio-button label="week">周</px-radio-button>
            <px-radio-button label="months">月</px-radio-button>
          </px-radio-group> -->
          <px-form-item label="时间日期" style="width: 440px !important; margin: 24px 0 0 16px">
            <px-date-picker
              v-model="dateSpc"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="shortcuts"
              :default-time="defaultTime"
              @change="setspctime"
            />
          </px-form-item>
          <px-button style="margin-left: 16px" type="primary" icon="" @click="handleSpcAnalysis(detailjobId)">查询</px-button>
          <px-button icon="" @click="resetQuerydetail">重置</px-button>
          <px-button style="float: right; margin: 20px 24px 0 16px" type="primary" plain @click="addchukuList()">关联分析</px-button>
          <px-button type="primary" plain @click="printFile()">导出</px-button>
          <px-button type="primary" plain @click="exportExcel()">导出excel</px-button>
          <!-- <px-button style="float: right; margin: 20px 24px 0 16px" type="primary" plain>导出</px-button> -->
        </px-from>
      </div>
      <!-- <px-tabs v-model="activeCharts" class="demo-tabs">
        <px-tab-pane label="多轴" name="multiaxis"></px-tab-pane>
        <px-tab-pane label="展开" name="unfold"></px-tab-pane>
      </px-tabs> -->
      <px-tabs v-model="activeCharts" class="equipment-tabs" style="margin-left: 10px; background: none">
        <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
          <template #label>
            <p class="pane-bottom">{{ item.label }}</p>
            <p class="pane-line" />
          </template>
        </px-tab-pane>
      </px-tabs>
      <div id="print-content" ref="tableElement">
        <div>
          <div v-show="activeCharts == 'multiaxis'" class="detailmain">
            <modelTitle :title="'SPC Chart'" />
            <div class="spcchart">
              <div class="spcradios">
                <px-radio-group v-model="tabvalue" size="small" @change="settabvalue">
                  <px-radio-button v-for="item in spcList" :key="item.jobId" :label="item.jobId">{{ item.indicatorName }}</px-radio-button>
                </px-radio-group>
              </div>
              <chartsSearch
                :name="equipdata.indicatorName"
                :startValue="equipdata.startValue"
                :step="equipdata.step"
                :usl="equipdata.uslValue"
                :ucl="equipdata.uclValue"
                :uwl="equipdata.uwlValue"
                :target="equipdata.targetValue"
                :lwl="equipdata.lwlValue"
                :lcl="equipdata.lclValue"
                :lsl="equipdata.lslValue"
                :SpcAnalysis="SpcAnalysis"
                :pointUnit="pointUnit"
                :tabvalue="tabvalue"
                :width="'100%'"
                :height="'470px'"
                @setNote="getNoteData"
                @setNoteValue="getNoteDataValue"
              />
            </div>
          </div>
          <div v-if="activeCharts == 'unfold'" class="detailmainunfold">
            <modelTitle :title="'SPC Chart'" />
            <div class="spcchart">
              <unfoldChrats :activeCharts="activeCharts" :SpcAnalysis="SpcAnalysis" />
            </div>
          </div>
        </div>

        <div class="detailmain2">
          <px-tabs v-if="addTag" v-model="activeName" class="equipment-tabs">
            <px-tab-pane name="all">
              <template #label>
                <p class="pane-bottom">ALARM({{ totalCount }})</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>

            <px-tab-pane name="ooc">
              <template #label>
                <p class="pane-bottom">OOC({{ totalOocCount }})</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
            <px-tab-pane name="oow">
              <template #label>
                <p class="pane-bottom">OOW({{ totalOowCount }})</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
            <px-tab-pane name="oos">
              <template #label>
                <p class="pane-bottom">OOS({{ totalOosCount }})</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
            <px-tab-pane name="Normal">
              <template #label>
                <p class="pane-bottom">Normal({{ totalNormalCount }})</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
          </px-tabs>
        </div>
        <div style="padding: 20px 24px; background: white">
          <Alarm
            :activeName="activeName"
            :jobIdList="[tabvalue]"
            :dateSpc="dateSpc"
            @Notetag="setNotetag"
            @updateNote="updateNote"
            @editorNote="searchNote"
          />
        </div>
      </div>
    </px-scrollbar>
    <px-dialog v-model="progressVisible" draggable clickHideContent title="关联分析-指标添加" width="1431" align-center>
      <px-form ref="queryRef" class="custom-form-ui" :model="queryParams2" :inline="true" label-width="90px">
        <!-- <px-form-item label="科室">
          <px-select
            v-model="queryParams2.classCode"
            placeholder="请选择科室"
            clearable
            style="width: 200px"
            filterable
            @change="setreceiveCompanyCode2"
          >
            <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
          </px-select>
        </px-form-item> -->
        <px-form-item label="系统">
          <px-tree-select
            v-model="queryParams2.systemCode"
            clearable
            style="width: 100%"
            placeholder="请选择设备系统（树状图）"
            :props="defaultProps"
            :data="systemList"
            check-strictly="true"
            multiple
            :render-after-expand="false"
            collapse-tags
            collapse-tags-tooltip
          />
        </px-form-item>
        <px-form-item label="点位" prop="point">
          <!-- <px-select v-model="queryParams2.point" clearable filterable style="width: 200px" placeholder="请选择点位">
            <px-option v-for="dict in pointList" :key="dict.value" :label="dict.pointName" :value="dict.pointName" />
          </px-select> -->
          <px-input v-model="queryParams2.point" placeholder="请输入点位" style="width: 200px" clearable />
        </px-form-item>
        <px-form-item label="指标名称">
          <px-input v-model="queryParams2.indicatorName" placeholder="请输入指标名称" style="width: 200px" clearable />
        </px-form-item>
        <px-form-item label="指标级别">
          <px-select v-model="queryParams2.indicatorLevel" placeholder="请选择接指标级别" clearable style="width: 200px" filterable>
            <px-option v-for="dict in receiveCompanyList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
          </px-select>
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery2('search')">查询</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery2">重置</px-button>
      </px-form>
      <px-table
        ref="multipleTableRef"
        v-loading="loading"
        class="digtable1"
        :data="rukuList"
        height="250"
        show-overflow-tooltip
        border
        :row-key="getRowKey"
        @selection-change="handleSelectionChange2"
      >
        <px-table-column type="selection" :reserve-selection="true" width="40" />
        <px-table-column label="指标名称" prop="indicatorName">
          <template #default="scope">
            <span>{{ scope.row.indicatorName }}</span>
          </template>
        </px-table-column>

        <px-table-column label="指标级别" align="center" prop="indicatorLevel">
          <template #default="scope">
            <div v-if="scope.row.indicatorLevel == 'Key-key'" class="level1">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'key' || scope.row.indicatorLevel == 'Key'" class="level2">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'non-key'" class="level3">{{ scope.row.indicatorLevel }}</div>
          </template>
        </px-table-column>
        <px-table-column label="系统" prop="systemCode">
          <template #default="scope">
            <span>{{ scope.row.systemName }}</span>
          </template>
        </px-table-column>
        <px-table-column label="绑定点位" prop="point">
          <template #default="scope">
            <span>{{ scope.row.point }}</span>
          </template>
        </px-table-column>
        <px-table-column label="USL" prop="uslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              USL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uslValue ? scope.row.uslValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UCL" prop="uclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UCL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uclValue ? scope.row.uclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UWL" prop="uwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UWL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uwlValue ? scope.row.uwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="T" prop="targetValue">
          <template #default="scope">
            <span>{{ scope.row.targetValue ? scope.row.targetValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LWL" prop="lwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LWL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lwlValue ? scope.row.lwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LCL" prop="lclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LCL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lclValue ? scope.row.lclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LSL" prop="lslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LSL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lslValue ? scope.row.lslValue : "-" }}</span>
          </template>
        </px-table-column>
        <!-- <px-table-column label="OOW" prop="oowCount">
          <template #default="scope">
            <span>{{ scope.row.oowCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOC" prop="oocCount">
          <template #default="scope">
            <span>{{ scope.row.oocCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOS" prop="oosCount">
          <template #default="scope">
            <span>{{ scope.row.oosCount }}</span>
          </template>
        </px-table-column> -->
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <pagination
        v-show="total2 > 0"
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        style="margin-bottom: -10px"
        :total="total2"
        @pagination="getRukuList"
      />
      <px-button type="primary" style="margin-bottom: 16px" @click="clearSpcList()">清空</px-button>
      <px-table v-loading="loading" style="margin-top: 20px" :data="selectionList" height="250" show-overflow-tooltip border class="digtable2">
        <px-table-column label="指标名称" prop="indicatorName">
          <template #default="scope">
            <span>{{ scope.row.indicatorName }}</span>
          </template>
        </px-table-column>

        <px-table-column label="指标级别" align="center" prop="indicatorLevel">
          <template #default="scope">
            <div v-if="scope.row.indicatorLevel == 'Key-key'" class="level1">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'key' || scope.row.indicatorLevel == 'Key'" class="level2">{{ scope.row.indicatorLevel }}</div>
            <div v-if="scope.row.indicatorLevel == 'non-key'" class="level3">{{ scope.row.indicatorLevel }}</div>
          </template>
        </px-table-column>
        <px-table-column label="系统" prop="systemCode">
          <template #default="scope">
            <span>{{ scope.row.systemName }}</span>
          </template>
        </px-table-column>
        <px-table-column label="绑定点位" prop="point">
          <template #default="scope">
            <span>{{ scope.row.point }}</span>
          </template>
        </px-table-column>
        <px-table-column label="USL" prop="uslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              USL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uslValue ? scope.row.uslValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UCL" prop="uclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UCL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uclValue ? scope.row.uclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="UWL" prop="uwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              UWL
              <px-icon> <Back /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.uwlValue ? scope.row.uwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="T" prop="targetValue">
          <template #default="scope">
            <span>{{ scope.row.targetValue ? scope.row.targetValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LWL" prop="lwlValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LWL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lwlValue ? scope.row.lwlValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LCL" prop="lclValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LCL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lclValue ? scope.row.lclValue : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="LSL" prop="lslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              LSL
              <px-icon> <Right /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.lslValue ? scope.row.lslValue : "-" }}</span>
          </template>
        </px-table-column>
        <!-- <px-table-column label="OOW" prop="oowCount">
          <template #default="scope">
            <span>{{ scope.row.oowCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOC" prop="oocCount">
          <template #default="scope">
            <span>{{ scope.row.oocCount }}</span>
          </template>
        </px-table-column>
        <px-table-column label="OOS" prop="oosCount">
          <template #default="scope">
            <span>{{ scope.row.oosCount }}</span>
          </template>
        </px-table-column> -->
        <px-table-column label="颜色" prop="lslValue">
          <template #header>
            <span style="display: inline-flex; align-items: center">
              颜色
              <px-icon> <EditPen /> </px-icon
            ></span>
          </template>
          <template #default="scope">
            <span> <px-color-picker v-model="scope.color" show-alpha :predefine="predefineColors" /></span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" align="center" width="140">
          <template #default="scope">
            <px-button link type="danger" @click="handleDelete(scope.row)"
              ><px-tooltip class="box-item" content="删除" placement="top">
                <px-icon>
                  <Delete />
                </px-icon> </px-tooltip
            ></px-button>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="progressVisible = false">取消</px-button>
          <px-button type="primary" @click="addRukudetails()"> 确认 </px-button>
        </span>
      </template>
    </px-dialog>
    <img id="print-img" :src="imageUrl" />
    <px-dialog v-model="contentTextVisible" draggable clickHideContent title="批注" width="677" align-center>
      <px-row class="contentrow">
        <px-col :span="24">
          <px-input v-model="constenttext" style="margin-top: 16px" :rows="2" type="textarea" placeholder="请输入" />
        </px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="contentTextVisible = false">取消</px-button>
          <px-button type="warning" @click="closecontent()">显示取消</px-button>
          <px-button v-if="constenttexttitle == '新增'" type="primary" @click="addcontent()"> 添加 </px-button>
          <px-button v-if="constenttexttitle == '编辑'" type="primary" @click="editorcontent()"> 保存 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup name="Dict" lang="ts">
// import useDictStore from '@/store/modules/dict'
defineOptions({
  name: "SystemDataDict"
});
// import { router } from "@/router";
import Alarm from "./alarm.vue";
import spcicon from "@/assets/svg/menu/menu_spc_settings.svg?component";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import unfoldChrats from "../components/unfoldChrats.vue";
import tableChart from "../components/tableChart.vue";
import tableChart2 from "../components/tableChart2.vue";
import { ArrowLeft } from "@px-ui/icons-vue";
import { useRoute } from "vue-router";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { getModuleName } from "@/api/equip/spareParts";
import chartsSearch from "../components/chartsSearch.vue";
const timePeriod = ref("minutes");
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { spcqueryList, spcquerySpcAnalysis, spcIndicatorquerySpcAnalysisResultList, twinPointpageTwinPoint, spcNoteaddNormalNote } from "@/api/spc";
import { querySystemSelect } from "@/api/equip/archive";
import printJS from "print-js";
import html2canvas from "html2canvas";
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];
const props = defineProps({
  classcode: {
    type: String,
    default: ""
  }
});
const constenttext = ref("");
const chartnum = ref(12);
const setTabs = val => {
  checkvaleList.value = [];
};
const radiochang = val => {
  localStorage.setItem("chartnum", val);
};
const constenttexttitle = ref("新增");
const closecontent = () => {
  console.log(noteDataValue.value);
  spcNoteaddNormalNote({
    jobId: detailjobId.value,
    pointValue: noteData.value.value,
    ctime: noteData.value.time,
    spcNoteId: noteData.value.spcAlarmNote.spcNoteId,
    content: constenttext.value,
    tag: false
  }).then(res => {
    PxMessage({
      message: "修改成功",
      type: "success"
    });
    contentTextVisible.value = false;
    constenttext.value = "";
    handleSpcAnalysis(detailjobId.value);
  });
};
const editorcontent = () => {
  spcNoteaddNormalNote({
    jobId: detailjobId.value,
    pointValue: noteData.value.value,
    ctime: noteData.value.time,
    content: constenttext.value,
    spcNoteId: noteData.value.spcAlarmNote.spcNoteId,
    noteData: noteData.value.spcAlarmNote.spcNoteId,
    tag: true
  }).then(res => {
    PxMessage({
      message: "修改成功",
      type: "success"
    });
    contentTextVisible.value = false;
    constenttext.value = "";
    handleSpcAnalysis(detailjobId.value);
    handleQuery("search");
  });
};
const addcontent = () => {
  spcNoteaddNormalNote({
    jobId: detailjobId.value,
    pointValue: noteDataValue.value ? noteDataValue.value : noteData.value.value,
    ctime: noteData.value.time,
    content: constenttext.value,
    tag: true
  }).then(res => {
    PxMessage({
      message: "添加成功",
      type: "success"
    });
    contentTextVisible.value = false;
    constenttext.value = "";
    handleSpcAnalysis(detailjobId.value);
    handleQuery("search");
  });
};
const contentTextVisible = ref(false);
const imageUrl = ref(null);
const tableElement = ref(null);
const tableElement2 = ref(null);
const printFile = () => {
  console.log(tableElement.value);
  if (tableElement.value) {
    const content = document.getElementById("print-content");
    let rect = content.getBoundingClientRect();
    html2canvas(content)
      .then(canvas => {
        console.log(rect);
        imageUrl.value = canvas.toDataURL("image/png");
        setTimeout(() => {
          printJS({
            printable: "print-img",
            type: "html",
            style: `
         @media print{
          body,html{
            margin:0;
            padding:0;
            width:100%;
            height:${rect.height * (1080 / rect.width)}px;
          }
          #print-img {
            width:1080px;
            transform-origin:top left;
          }
          img.print-full-page{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;
            page-break-before:always;
            page-break-after:always;
            background:white;
          }
         @page {margin: 1cm;}
          }
          `, // 去掉页眉页脚
            scanStyles: false,
            // targetStyles: ['*'],
            header: null,
            documentTitle: "spc"
          });
        }, 100);
      })
      .catch(error => {
        console.log("Error", error);
      });
  }
};
const setNotetag = nodeid => {
  handleSpcAnalysis2(detailjobId.value, nodeid);
};
const handleSpcAnalysis2 = (jobId, nodeid) => {
  tabvalue.value = jobId;
  detailjobId.value = jobId;
  equipopen.value = true;
  let idslist = [...typeList.value.filter(item => item.jobId == jobId), ...selectionList.value];
  let seenIds = new Set(idslist);
  spcList.value = seenIds;
  console.log(spcList.value);
  let seenIdsjobId = idslist.map(item => item.jobId);
  spcquerySpcAnalysis({
    jobIdList: [...seenIdsjobId],
    timePeriod: timePeriod.value,
    startTime: dateSpc.value[0],
    endTime: dateSpc.value[1],
    requireAlarmNote: true,
    spcAnalysisResultId: nodeid
  }).then((response: any) => {
    console.log(response);
    SpcAnalysis.value = response;
    handleQuery("search");
  });
  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    jobIdList: [tabvalue.value],
    alarmType: "",
    startTime: dateSpc.value[0],
    endTime: dateSpc.value[1]
  }).then(res => {
    if (res != null) {
      totalCount.value = res.totalCount;
      totalOocCount.value = res.totalOocCount;
      totalOosCount.value = res.totalOosCount;
      totalOowCount.value = res.totalOowCount;
      totalNormalCount.value = res.totalNormalCount;
    } else {
      totalCount.value = 0;
      totalOocCount.value = 0;
      totalOosCount.value = 0;
      totalOowCount.value = 0;
      totalNormalCount.value = 0;
    }
  });
  queryParams2.value = {
    indicatorName: "",
    classCode: queryParams2.value.classCode,
    systemCode: [],
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    jobIdList: "",
    alarmType: "",
    pageNum: 1,
    pageSize: 10,
    configType: "SYSTEM"
  };
  getRukuList();
};
const exportLoading = ref(false);
const printFile2 = () => {
  console.log(tableElement2.value);
  exportLoading.value = true;
  setTimeout(() => {
    if (tableElement2.value) {
      const content = document.getElementById("print-content2");
      let rect = content.getBoundingClientRect();
      html2canvas(content)
        .then(canvas => {
          console.log(rect);
          imageUrl.value = canvas.toDataURL("image/png");
          exportLoading.value = false;
          setTimeout(() => {
            printJS({
              printable: "print-img",
              type: "html",
              style: `
         @media print{
          body,html{
            margin:0;
            padding:0;
            width:100%;
            height:${rect.height * (1080 / rect.width)}px;
          }
          #print-img {
            width:1080px;
            transform-origin:top left;
          }
          img.print-full-page{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;
            page-break-before:always;
            page-break-after:always;
            background:white;
          }
         @page {margin: 1cm;}
          }
          `, // 去掉页眉页脚
              scanStyles: false,
              // targetStyles: ['*'],
              header: null,
              documentTitle: "spc"
            });
          }, 100);
        })
        .catch(error => {
          console.log("Error", error);
        });
    }
  }, 3000);
};
const activeWater = ref("two");
const tabPaneList2 = [
  {
    label: "图表",
    name: "two"
  },
  {
    label: "列表",
    name: "first"
  }
];
let tabvalue = ref("");
let checkvaleList = ref([]);
const getcheckvalue = (val: any): void => {
  console.log(val);
  checkvaleList.value = val;
  if (checkvaleList.value.length > 0) {
    getprintJobidListChart(checkvaleList.value);
  }
};

const settabvalue = item => {
  console.log(item);
  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    jobIdList: [tabvalue.value],
    alarmType: "",
    startTime: dateSpc.value[0],
    endTime: dateSpc.value[1]
  }).then(res => {
    if (res != null) {
      totalCount.value = res.totalCount;
      totalOocCount.value = res.totalOocCount;
      totalOosCount.value = res.totalOosCount;
      totalOowCount.value = res.totalOowCount;
      totalNormalCount.value = res.totalNormalCount;
    } else {
      totalCount.value = 0;
      totalOocCount.value = 0;
      totalOosCount.value = 0;
      totalOowCount.value = 0;
      totalNormalCount.value = 0;
    }
  });
};
const updateNote = () => {
  handleQuery("search");
};
const searchNote = () => {
  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    jobIdList: [tabvalue.value],
    alarmType: "",
    startTime: dateSpc.value[0],
    endTime: dateSpc.value[1]
  }).then(res => {
    if (res != null) {
      totalCount.value = res.totalCount;
      totalOocCount.value = res.totalOocCount;
      totalOosCount.value = res.totalOosCount;
      totalOowCount.value = res.totalOowCount;
      totalNormalCount.value = res.totalNormalCount;
    } else {
      totalCount.value = 0;
      totalOocCount.value = 0;
      totalOosCount.value = 0;
      totalOowCount.value = 0;
      totalNormalCount.value = 0;
    }
  });
};
const predefineColors = ref(["#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585", "#c71585"]);
const addchukuList = () => {
  progressVisible.value = true;
  // console.log(spcList.value);
  // selectionList.value = spcList.value;
};
const shortcuts = [
  {
    text: "本日",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setHours(0, 0, 0, 0);
      start.setTime(start.getTime());
      return [start, end];
    }
  },
  {
    text: "近7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "近30天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "本月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(1);
      start.setHours(0, 0, 0, 0);
      start.setTime(start.getTime());
      return [start, end];
    }
  }
  // {
  //   text: "本季度",
  //   value: () => {
  //     const end = new Date();
  //     const start = new Date();
  //     let currenMonth = start.getMonth();
  //     let quarter = Math.floor((currenMonth + 3) / 3) - 1;
  //     start.setMonth(quarter * 3, 1);
  //     start.setDate(1);
  //     start.setHours(0, 0, 0, 0);
  //     start.setTime(start.getTime());
  //     return [start, end];
  //   }
  // }
];
const defaultProps = {
  children: "children",
  label: "name",
  value: "code"
};
const replaceTree = treevalue => {
  function eachItem(arr) {
    let res = arr;
  }
};
const options = ref([]);
const zbloading = ref(false);
import { pageMeasureList } from "@/api/system/measure";
const remoteMethod = (query: string) => {
  if (query) {
    zbloading.value = true;
    setTimeout(() => {
      console.log(query);
      pageMeasureList({
        measureName: "",
        tagCode: "",
        measureCode: query,
        isNeedCalculate: "",
        measureTypeCode: "",
        createBy: "",
        className: props.classcode,
        measureSource: "",
        isMaintain: "",
        pageNum: 1,
        pageSize: 20,
        systemCode: ""
      }).then((response: any) => {
        options.value = response.data;
        zbloading.value = false;
      });
      console.log(query);
    }, 200);
  } else {
    options.value = [];
  }
};
// 如果有厂区和科室，根据他们的值获取系统
const handleSystemFocus = async () => {
  querySystemSelect({ factoryArea: "", className: queryParams.value.classCode }).then(res => {
    console.log(res[0].children[0].children);
    systemList.value = res[0].children;
  });
};
const handleSystemFocus2 = async () => {
  querySystemSelect({ factoryArea: "", className: queryParams2.value.classCode }).then(res => {
    systemList2.value = res[0].children;
  });
};
const setreceiveCompanyCode = val => {
  let setvalue = null;
  setvalue = liquidList.value.find(option => option.itemValue == val);
  if (setvalue && setvalue?.itemDesc != "") {
    queryParams.value.receiveCompanyCode = JSON.parse(setvalue.itemDesc).receiveCompanyCode;
  } else {
    queryParams.value.receiveCompanyCode = "";
  }
  //console.log(setvalue);
  gettwinPointpageTwinPoint();
  handleSystemFocus();
};
const setspctime = val => {
  if ((new Date(val[1]).getTime() - new Date(val[0]).getTime()) / (3600 * 1000 * 24) > 90) {
    PxMessage({
      message: "请选择90天以内的时间间隔",
      type: "error"
    });
    const end = new Date();
    end.setTime(end.getTime());
    const start = new Date();
    const start2 = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    start2.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
    if (props.classcode == "GAS") {
      dateSpc.value = [formatDate(start2), formatDate(end)];
      dateRange.value = [formatDate(start2), formatDate(end)];
    } else {
      dateSpc.value = [formatDate(start), formatDate(end)];
      dateRange.value = [formatDate(start), formatDate(end)];
    }
  } else {
  }
  console.log();
};
const setreceiveCompanyCode2 = val => {
  handleSystemFocus2();
  gettwinPointpageTwinPoint();
};

function handleDelete(row) {
  PxMessageBox.confirm("是否确认删除？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      selectionList.value = selectionList.value.filter(item => item != row);
      multipleTableRef.value!.toggleRowSelection(row, undefined);
      PxMessage({
        message: "删除成功",
        type: "success"
      });
      getList();
    })
    .catch(() => {});
}

const activeName = ref("all");
const addTag = ref(true);
const route = useRoute();
onMounted(() => {
  if (route.query.pointPosition) {
    loading.value = true;
    spcqueryList({
      indicatorName: "",
      classCode: "WATER",
      systemCode: [],
      indicatorLevel: "",
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
      point: route.query.pointPosition,
      querySpcCount: true,
      pageNum: 1,
      pageSize: 20
    })
      .then((response: any) => {
        typeList.value = response.data;
        if (response.data.length > 0) {
          handleSpcAnalysis(response.data[0].jobId);
        } else {
          PxMessage({
            message: "暂无SPC指标",
            type: "error"
          });
        }
      })
      .catch(() => {
        loading.value = false;
      });
  }
  if (route.query.equipmentId) {
    handleDetail(route.query.equipmentId);
  }
  if (route.query.jobId) {
    console.log(route.query.jobId);
    handleSpcAnalysis(route.query.jobId);
  }
  queryParams.value.classCode = props.classcode;
  queryParams2.value.classCode = props.classcode;
  getList();
  loading.value = true;

  handleSystemFocus();
  handleSystemFocus2();
  if (localStorage.getItem("chartnum")) {
    chartnum.value = Number(localStorage.getItem("chartnum"));
  }
});
const pointUnit = ref("空");
const upLoadProgress = event => {
  //console.log(event.percent);
  progressPercent.value = event.percent;
  if (event.percent != 100) {
    spcVisible.value = true;
  } else {
    spcVisible.value = false;
  }
};
const { proxy }: any = getCurrentInstance();

const typeList = ref([]);
const spcVisible = ref(false);
const equipopen = ref(false);
const equipopenDetail = ref(false);
const loading = ref(true);
const ids = ref([]);
const total = ref(0);
const total2 = ref(0);
const progressVisible = ref(false);
const progressPercent = ref(0);
const dateRange = ref([]);
const dateSpc = ref([]);
const data = reactive({
  systemList: [],
  systemList2: [],
  spcList: [],
  liquidList: [],
  transportCompanyList: [],
  receiveCompanyList: [],
  rukuList: [],
  typeIdList: [],
  categoryList: [],
  equipmentTypeList: [],
  positionList: [],
  equipmentDeptList: [],
  pointList: [],
  modelIdList: [],
  form: {},
  SpcAnalysis: [],
  SpcAnalysis2: [],
  SpcAnalysis3: [],
  selectRukuList: [],
  equipdata: {
    id: "",
    jobId: "",
    indicatorName: "",
    classCode: "",
    systemCode: "",
    indicatorLevel: "",
    point: "",
    pointUnit: "",
    step: 0,
    startValue: 0,
    targetValue: 0,
    uclValue: 0,
    lclValue: 0,
    uwlValue: 0,
    lwlValue: 0,
    uslValue: 0,
    lslValue: 0,
    u3lValue: 0,
    l3lValue: 0
  },
  queryParams: {
    indicatorName: "",
    classCode: "",
    systemCode: [],
    indicatorLevel: "Key-key",
    startTime: "",
    endTime: "",
    point: "",
    querySpcCount: true,
    pageNum: 1,
    pageSize: 20,
    configType: "SYSTEM"
  },
  queryParams2: {
    indicatorName: "",
    classCode: "",
    systemCode: [],
    indicatorLevel: "Key-key",
    startTime: "",
    endTime: "",
    jobIdList: "",
    alarmType: "",
    pageNum: 1,
    pageSize: 10,
    configType: "SYSTEM"
  },
  headers: {
    Authorization: "Bearer " + getToken().accessToken || ""
  },
  moduleName: "",
  dialogImageUrl: "",
  imageVisible: false,
  spcAnalyzeList: [],
  selectionList: [],
  activeCharts: "multiaxis",
  chartsList: [],
  tableJobidList: []
});

const {
  tableJobidList,
  chartsList,
  activeCharts,
  liquidList,
  receiveCompanyList,
  rukuList,
  SpcAnalysis,
  SpcAnalysis2,
  SpcAnalysis3,
  queryParams,
  form,
  queryParams2,
  equipdata,
  equipmentTypeList,
  modelIdList,
  pointList,
  selectRukuList,
  spcList,
  spcAnalyzeList,
  systemList,
  systemList2,
  selectionList
} = toRefs(data);
const tabPaneList = [
  {
    label: "多轴",
    name: "multiaxis"
  },
  {
    label: "展开",
    name: "unfold"
  }
];
// 文件下载
const downloadFile = async row => {
  const data = await getModuleName({});
  // moduleName.value = data;
  const params = {
    id: row.id,
    fileName: row.fileName,
    moduleName: data
  };
  proxy.download("post", "/sharing/api/v1/file/download", params, row.originalName);
};
const noteData = ref({
  point: null,
  spcAlarmNotes: [],
  time: 0,
  value: 0
});
const noteDataValue = ref(0);
const getNoteData = data => {
  console.log(data);
  if (data.spcAlarmNote != null) {
    constenttexttitle.value = "编辑";
    noteData.value = data;
    constenttext.value = data.spcAlarmNote.content;
    contentTextVisible.value = true;
  } else {
    constenttexttitle.value = "新增";
    noteData.value = data;
    constenttext.value = "";
    contentTextVisible.value = true;
  }
};
const getNoteDataValue = value => {
  noteDataValue.value = value;
};
const setTimePeriod = () => {
  handleSpcAnalysis(detailjobId.value);
};
const gettwinPointpageTwinPoint = () => {
  twinPointpageTwinPoint({
    pointGroup: queryParams2.value.classCode,
    pageNum: 1,
    pageSize: 1000
  }).then((response: any) => {
    pointList.value = response.data;
  });
};
const getqueryCategoryList = () => {
  gettwinPointpageTwinPoint();
  queryChildByTypeCodeAndItemValue({
    typeCode: "className"
  }).then((response: any) => {
    //console.log(response);
    liquidList.value = response;
  });
  queryChildByTypeCodeAndItemValue({
    typeCode: "SPCL"
  }).then((response: any) => {
    //console.log(response);
    receiveCompanyList.value = response;
  });
  const end = new Date();
  // end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  const start2 = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  start2.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
  console.log(props.classcode);

  if (route.query.startTime) {
    dateSpc.value = [route.query.startTime, route.query.endTime];
    dateRange.value = [route.query.startTime, route.query.endTime];
  } else {
    if (props.classcode == "GAS") {
      dateSpc.value = [formatDate(start2), formatDate(end)];
      dateRange.value = [formatDate(start2), formatDate(end)];
    } else {
      dateSpc.value = [formatDate(start), formatDate(end)];
      dateRange.value = [formatDate(start), formatDate(end)];
    }
  }
};
getqueryCategoryList();
function getList() {
  console.log(queryParams.value);
  loading.value = true;

  if (dateRange.value != null) {
    queryParams.value.startTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }

  spcqueryList(queryParams.value)
    .then((response: any) => {
      typeList.value = response.data;
      total.value = response.total;
      console.log(response);
      tableJobidList.value = response.data.map(item => item.jobId);
      console.log(tableJobidList.value);
      setTimeout(() => {
        loading.value = false;
      }, 1500);
      if (tableJobidList.value.length > 0) {
        gettableJobidListChart(tableJobidList.value);
      } else {
        SpcAnalysis2.value = [];
      }
    })
    .catch(() => {
      loading.value = false;
    });
}
const gettableJobidListChart = jobIdList => {
  const d1 = new Date(dateRange.value[1]);
  const d2 = new Date(dateRange.value[0]);
  loading.value = true;
  if (d1.getTime() - d2.getTime() > 7 * 24 * 60 * 60 * 1000) {
    timePeriod.value = "hour";
    spcquerySpcAnalysis({
      jobIdList: [...jobIdList],
      timePeriod: timePeriod.value,
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
      requireAlarmNote: true
    })
      .then((response: any) => {
        console.log(response);
        SpcAnalysis2.value = response;
        loading.value = false;
        // typeList.value.forEach((item, index) => {
        //   item.maxValue = response[index].maxValue;
        //   item.avgValue = response[index].avgValue;
        //   item.minValue = response[index].minValue;
        //   item.cpValue = response[index].cpValue;
        //   item.cpkValue = response[index].cpkValue;
        // });
        console.log(typeList.value);
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    timePeriod.value = "minutes";
    spcquerySpcAnalysis({
      jobIdList: [...jobIdList],
      timePeriod: timePeriod.value,
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
      requireAlarmNote: true
    })
      .then((response: any) => {
        console.log(response);
        SpcAnalysis2.value = response;
        console.log(typeList.value);
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  }
};
const getprintJobidListChart = jobIdList => {
  spcquerySpcAnalysis({
    jobIdList: [...jobIdList],
    timePeriod: timePeriod.value,
    startTime: dateRange.value[0],
    endTime: dateRange.value[1]
  }).then((response: any) => {
    console.log(response);
    SpcAnalysis3.value = response;
  });
};
const addRukudetails = () => {
  progressVisible.value = false;
  handleSpcAnalysis(detailjobId.value);
};
const multipleTableRef = ref(null);

function getRukuList() {
  loading.value = true;
  if (dateRange.value != null) {
    queryParams2.value.startTime = dateRange.value[0];
    queryParams2.value.endTime = dateRange.value[1];
  } else {
    queryParams2.value.startTime = "";
    queryParams2.value.endTime = "";
  }

  spcqueryList(queryParams2.value).then((response: any) => {
    if (response.data != null) {
      rukuList.value = response.data.filter(item => item.jobId != detailjobId.value);
      total2.value = response.total;
      loading.value = false;
    } else {
      rukuList.value = [];
      loading.value = false;
    }
  });
}
/** 取消按钮 */
function cancel() {
  activeCharts.value = "multiaxis";
  equipopen.value = false;
  if (progressVisible.value) {
    multipleTableRef.value.clearSelection();
  }
  selectionList.value = [];
  multipleTableRef.value.clearSelection();
}
function equipopenDetailcancel() {
  equipopenDetail.value = false;
}
/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    dictionaryName: undefined,
    dictionaryType: undefined,
    status: "VALID",
    remarks: undefined
  };
  proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  getList();
}
/** 重置按钮操作 */
function resetQuerydetail() {
  const end = new Date();
  // end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  const start2 = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  start2.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
  console.log(props.classcode);
  if (props.classcode == "GAS") {
    dateSpc.value = [formatDate(start2), formatDate(end)];
    dateRange.value = [formatDate(start2), formatDate(end)];
  } else {
    dateSpc.value = [formatDate(start), formatDate(end)];
    dateRange.value = [formatDate(start), formatDate(end)];
  }
}
function resetQuery() {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    indicatorName: "",
    classCode: props.classcode,
    systemCode: [],
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    point: "",
    querySpcCount: true,
    configType: "SYSTEM"
  };
  const end = new Date();
  end.setTime(end.getTime());
  const start = new Date();
  const start2 = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  start2.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
  if (route.query.startTime) {
    dateSpc.value = [route.query.startTime, route.query.endTime];
    dateRange.value = [route.query.startTime, route.query.endTime];
  } else {
    if (props.classcode == "GAS") {
      dateRange.value = [formatDate(start2), formatDate(end)];
      handleQuery("reset");
    } else {
      dateRange.value = [formatDate(start), formatDate(end)];
      handleQuery("reset");
    }
  }
}
const resetQueryd = () => {
  const end = new Date();
  end.setTime(end.getTime());
  const start = new Date();
  const start2 = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  start2.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
  if (props.classcode == "GAS") {
    dateRange.value = [formatDate(start2), formatDate(end)];
    dateSpc.value = [formatDate(start2), formatDate(end)];
    handleSpcAnalysis(detailjobId.value);
  } else {
    dateRange.value = [formatDate(start), formatDate(end)];
    dateSpc.value = [formatDate(start), formatDate(end)];
    handleSpcAnalysis(detailjobId.value);
  }
};
function handleQuery2(type) {
  if (type == "search") {
    queryParams2.value.pageNum = 1;
  }
  getRukuList();
}
function resetQuery2() {
  queryParams2.value = {
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    indicatorName: "",
    classCode: queryParams2.value.classCode,
    systemCode: [],
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    jobIdList: "",
    alarmType: "",
    configType: "SYSTEM"
  };
  dateRange.value = [];
  handleQuery2("reset");
}

const detailjobId = ref("");
const totalCount = ref("");
const totalOocCount = ref("");
const totalOosCount = ref("");
const totalOowCount = ref("");
const totalNormalCount = ref("");
const handleSpcAnalysis = jobId => {
  tabvalue.value = jobId;
  detailjobId.value = jobId;
  equipopen.value = true;
  let idslist = [...typeList.value.filter(item => item.jobId == jobId), ...selectionList.value];
  let seenIds = new Set(idslist);
  spcList.value = seenIds;
  console.log(spcList.value);
  let seenIdsjobId = idslist.map(item => item.jobId);
  const d1 = new Date(dateRange.value[1]);
  const d2 = new Date(dateRange.value[0]);
  if (d1.getTime() - d2.getTime() > 7 * 24 * 60 * 60 * 1000) {
    timePeriod.value = "hour";
    if (seenIdsjobId.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...seenIdsjobId],
        timePeriod: timePeriod.value,
        startTime: dateSpc.value[0],
        endTime: dateSpc.value[1],
        requireAlarmNote: true
      }).then((response: any) => {
        console.log(response);
        SpcAnalysis.value = response;
      });
    } else {
      spcquerySpcAnalysis({
        jobIdList: [jobId],
        timePeriod: timePeriod.value,
        startTime: dateSpc.value[0],
        endTime: dateSpc.value[1],
        requireAlarmNote: true
      }).then((response: any) => {
        console.log(response);
        SpcAnalysis.value = response;
      });
    }
  } else {
    timePeriod.value = "minutes";
    if (seenIdsjobId.length > 0) {
      spcquerySpcAnalysis({
        jobIdList: [...seenIdsjobId],
        timePeriod: timePeriod.value,
        startTime: dateSpc.value[0],
        endTime: dateSpc.value[1],
        requireAlarmNote: true
      }).then((response: any) => {
        console.log(response);
        SpcAnalysis.value = response;
      });
    } else {
      spcquerySpcAnalysis({
        jobIdList: [jobId],
        timePeriod: timePeriod.value,
        startTime: dateSpc.value[0],
        endTime: dateSpc.value[1],
        requireAlarmNote: true
      }).then((response: any) => {
        console.log(response);
        SpcAnalysis.value = response;
      });
    }
  }

  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    jobIdList: [tabvalue.value],
    alarmType: "",
    startTime: dateSpc.value[0],
    endTime: dateSpc.value[1]
  }).then(res => {
    if (res != null) {
      totalCount.value = res.totalCount;
      totalOocCount.value = res.totalOocCount;
      totalOosCount.value = res.totalOosCount;
      totalOowCount.value = res.totalOowCount;
      totalNormalCount.value = res.totalNormalCount;
    } else {
      totalCount.value = "0";
      totalOocCount.value = "0";
      totalOosCount.value = "0";
      totalOowCount.value = "0";
      totalNormalCount.value = "0";
    }
  });
  queryParams2.value = {
    indicatorName: "",
    classCode: queryParams2.value.classCode,
    systemCode: [],
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    jobIdList: "",
    alarmType: "",
    pageNum: 1,
    pageSize: 10,
    configType: "SYSTEM"
  };
  getRukuList();
};

function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  console.log(selection);
  selectionList.value = selection;
  ids.value = selection.map(item => item.jobId);
  // single.value = selection.length != 1;
  // multiple.value = !selection.length;
}
function handleSelectionChange2(selection) {
  console.log(selection);
  selectionList.value = selection;
  // if (selection.length > 0) {
  //   selection.forEach(element => {
  //     if (selectionList.value.length == 0) {
  //       selectionList.value.push(element);
  //     } else {
  //       let flag = selectionList.value.some(item => item.jobId === element.jobId);
  //       if (!flag) {
  //         if (selectionList.value.length < 9) {
  //           selectionList.value.push(element);
  //         } else {
  //           PxMessage.warning("最多只能选择9个指标");
  //         }
  //       }
  //     }
  //   });
  // }
  // selectRukuList.value = selection;
  // ids.value = selection.map(item => item.jobId);
}
const handleSelection2 = (selection, row) => {
  console.log(selection, row);
};
const getRowKey = row => {
  return row.id;
};
const clearSpcList = () => {
  selectionList.value = selectionList.value.filter(item => item.jobId == detailjobId.value);
  multipleTableRef.value.clearSelection();
};
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
// const exportResult = () => {
//   let hostname = window.location.hostname;
//   let protocol = window.location.protocol;
//   if (dateRange.value != null && dateRange.value.length > 0) {
//     let Token = getToken().accessToken || "";
//     // proxy.download("post", "/operation/api/v1/water/testQuality/pwMetalImpurity/export", queryParams.value, "水质检测-纯水金属阴阳离子.xlsx");
//     // let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=water%252F%25E7%25BA%25AF%25E6%25B0%25B4%25E6%25B0%25B4%25E8%25B4%25A8%25E6%25A3%2580%25E6%25B5%258B%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&from=${dateRange.value[0]}&to=${dateRange.value[1]}&location&format=excel&extype=simple`;
//     let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=spc/exportResult.cpt&format=excel&extype=simple&token=${Token}&startTime=${dateRange.value[0]}&endTime=${dateRange.value[1]}&apiHost=${protocol}//${hostname}&pageNum=${1}&pageSize=${total.value}&classCode=${props.classcode}&indicatorName=${queryParams.value.indicatorName}&point=${queryParams.value.point}&indicatorLevel=${queryParams.value.indicatorLevel}&__filename__=SPC列表(${dateRange.value[0]}-${dateRange.value[1]})&facCode=${localStorage.getItem("facCode") || ""}`;
//     window.location.href = url;
//   } else {
//     PxMessage({
//       message: "请选择时间后再导出",
//       type: "error"
//     });
//   }
// };
const exportResult = () => {
  if (dateRange.value != null && dateRange.value.length > 0) {
    proxy.download("post", "/operation/api/v1/spcIndicator/exportSpcAnalysisResult", {
      startTime: dateRange.value[0],
      endTime: dateRange.value[1],
      querySpcCount: true,
      jobId: typeList.value.map(item => item.jobId),
      classCode: props.classcode
    });
  } else {
    PxMessage({
      message: "请选择时间后再导出",
      type: "error"
    });
  }
};
const exportExcel = () => {
  let hostname = window.location.hostname;
  let protocol = window.location.protocol;
  if (SpcAnalysis.value.filter(item => item.jobId == tabvalue.value)[0].pointValues == null) {
    PxMessage({
      message: "没有可以导出的数据",
      type: "error"
    });
  } else {
    if (dateSpc.value != null && dateSpc.value.length > 0) {
      let Token = getToken().accessToken || "";
      // proxy.download("post", "/operation/api/v1/water/testQuality/pwMetalImpurity/export", queryParams.value, "水质检测-纯水金属阴阳离子.xlsx");
      // let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=water%252F%25E7%25BA%25AF%25E6%25B0%25B4%25E6%25B0%25B4%25E8%25B4%25A8%25E6%25A3%2580%25E6%25B5%258B%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&from=${dateRange.value[0]}&to=${dateRange.value[1]}&location&format=excel&extype=simple`;
      let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=spc/export.cpt&format=excel&extype=simple&token=${Token}&startTime=${dateSpc.value[0]}&endTime=${dateSpc.value[1]}&apiHost=${protocol}//${hostname}&pageNum=${1}&pageSize=999&timePeriod=${timePeriod.value}&jobId=${tabvalue.value}&__filename__=${tabvalue.value}(${dateSpc.value[0]}-${dateSpc.value[1]})&facCode=${localStorage.getItem("facCode") || ""}`;
      window.location.href = url;
    } else {
      PxMessage({
        message: "请选择时间后再导出",
        type: "error"
      });
    }
  }
};
</script>
<style scoped lang="scss">
.app-container {
  background: none;
}

.addEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  z-index: 100;
  width: calc(100% - 48px);
  height: calc(100% - 79px);
  margin: 24px;
  background: white;
}

.editorEquip {
  position: absolute;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
}

.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}

.card-header {
  min-height: 40px;
  padding: 14px 15px 7px !important;
  cursor: pointer;
  user-select: none;
  background: #e7eefb;
}

.card-title {
  float: left;
  line-height: 14px;
}

.card-main {
  float: left;
  margin: -3px 8px 0 5px;
  cursor: pointer;
}

.box-card1 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card2 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card3 {
  width: calc(100% - 48px);
  height: 163px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card4 {
  width: calc(100% - 48px);
  height: 261px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.demo-form-inline {
  .px-input {
    --px-input-width: calc(100% - 100px);
  }

  .px-form-item {
    width: 100%;
  }

  .px-textarea__inner {
    width: calc(100% - 100px) !important;
  }

  .px-form-item__label {
    font-weight: 400 !important;
  }
}

.form-div {
  padding: 24px;

  .px-row {
    margin-bottom: 16px;
  }
}

.px-icon {
  font-size: 16px !important;
}

:deep(.px-tabs--top .px-tabs__item.is-top.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

:deep(.px-tabs .px-tabs__item) {
  .pane-bottom {
    line-height: 30px;
  }
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

.filename {
  position: absolute;
  bottom: -30px;
  width: 96px;
  overflow: hidden;
  color: rgb(166 167 172);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  width: 166px;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
}

:deep(.px-descriptions__body .px-descriptions__table.is-bordered .px-descriptions__cell) {
  border: 1px solid #dfdfdf;
}

.cell-item {
  text-align: right;
}

.digtable1 {
  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }

        th:nth-child(6) {
          background-color: #ccc3dd !important;
        }

        th:nth-child(7) {
          background-color: #ffadad !important;
        }

        th:nth-child(8) {
          background-color: #fff4b7 !important;
        }

        th:nth-child(9) {
          background-color: #b4ffce !important;
        }

        th:nth-child(10) {
          background-color: #fff4b7 !important;
        }

        th:nth-child(11) {
          background-color: #ffadad !important;
        }

        th:nth-child(12) {
          background-color: #ccc3dd !important;
        }
      }
    }
  }
}

.digtable2 {
  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }

        th:nth-child(5) {
          background-color: #ccc3dd !important;
        }

        th:nth-child(6) {
          background-color: #ffadad !important;
        }

        th:nth-child(7) {
          background-color: #fff4b7 !important;
        }

        th:nth-child(8) {
          background-color: #b4ffce !important;
        }

        th:nth-child(9) {
          background-color: #fff4b7 !important;
        }

        th:nth-child(10) {
          background-color: #ffadad !important;
        }

        th:nth-child(11) {
          background-color: #ccc3dd !important;
        }
      }
    }
  }
}

// .listtable {
//   :deep(.px-table__header) {
//     thead {
//       tr {
//         background-color: #e7eefb !important;

//         th {
//           font-size: 14px;
//           font-weight: bold;
//           color: #000;
//           background-color: #e7eefb !important;
//         }

//         th:nth-child(5) {
//           background-color: #ccc3dd !important;
//         }

//         th:nth-child(6) {
//           background-color: #ffadad !important;
//         }

//         th:nth-child(7) {
//           background-color: #fff4b7 !important;
//         }

//         th:nth-child(8) {
//           background-color: #b4ffce !important;
//         }

//         th:nth-child(9) {
//           background-color: #fff4b7 !important;
//         }

//         th:nth-child(10) {
//           background-color: #ffadad !important;
//         }

//         th:nth-child(11) {
//           background-color: #ccc3dd !important;
//         }
//       }
//     }
//   }
// }

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}

:deep(.px-upload--picture-card) {
  position: absolute;
}

.bian {
  line-height: 50px;
  text-align: center;
}

.level1 {
  // width: 52px;
  height: 24px;
  padding: 0 5px;
  margin: 0 auto;
  text-align: center;
  background: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 4px;
}

.level2 {
  // width: 52px;
  height: 24px;
  padding: 0 5px;
  margin: 0 auto;
  text-align: center;
  background: #fcf6ec;
  border: 1px solid #fda620;
  border-radius: 4px;
}

.level3 {
  // width: 52px;
  height: 24px;
  padding: 0 5px;
  margin: 0 auto;
  text-align: center;
  background: #eff6ff;
  border: 1px solid #3b82f6;
  border-radius: 4px;
}

.center {
  height: 100%;

  :deep(.px-descriptions__body) {
    height: 100%;

    table {
      height: 100% !important;
      border-left: none;

      .is-bordered-label {
        border-left: none !important;
      }

      .is-bordered-content {
        border-right: none !important;
      }
    }
  }
}

.center2 {
  :deep(.px-descriptions__body) {
    table {
      border-left: none;

      .is-bordered-label {
        border-left: none !important;
      }

      .is-bordered-content {
        border-right: none !important;
      }
    }
  }
}

.time {
  float: right;
  font-size: 14px;
  font-weight: 400;
  color: rgb(0 0 0 / 80%);
}

:deep(.custom-form-ui .px-form-item) {
  width: 230px !important;
}

.detailtop {
  width: 100%;
  height: 76px;
  background: white;
}

.detailmain {
  width: 100%;
  height: 645px;
  padding: 16px 20px;
  margin-top: 16px;
  background: white;
}

.detailmainunfold {
  width: 100%;
  padding: 16px 20px;
  margin-top: 16px;
  background: white;
}

.detailmain2 {
  width: 100%;
  height: 58px;
  padding: 16px 20px;
  margin-top: 16px;
  background: white;
}

.spcchart {
  width: 100%;
  margin-top: 20px;
}

.activespan {
  display: inline-block;
  float: left;
  width: 200px;
  height: 270px;
}

.activelist {
  width: 100%;
  height: 28px;
  overflow: hidden;
  font-size: 14px;
  color: rgb(0 0 0 / 50%);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.activelistactive {
  color: #3b82f6;
}

.activenone {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.spcradios {
  width: 100%;
}

#print-img {
  position: fixed;
  left: -200000px;
  width: 100%;
}

.printTable {
  position: fixed;
  left: -20000px;
  width: 1920px !important;
}
</style>
